<!DOCTYPE HTML>
<html ng-app="showTravelsCtrl">
<head>
    <title>雅江--旅游攻略</title>
    <meta charset="UTF-8"/>
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <script type="application/x-javascript"> addEventListener("load", function () {
        setTimeout(hideURLbar, 0);
    }, false);
    function hideURLbar() {
        window.scrollTo(0, 1);
    } </script>
    <!--本页面的css，不可更改位置-->
    <link href="css/travelNotes1.css" rel='stylesheet' type='text/css'/>
    <!--以下为顶部导航栏css-->
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
    <link rel="stylesheet" type="text/css" href="css/font-awesome.css"/>
    <link rel="stylesheet" type="text/css" href="css/style.css"/>
    <link rel="stylesheet" type="text/css" href="css/templatemo-style.css"/>

    <!---一下这个jquery是必须的不能将其替换为别的版本----->
    <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <!--交互使用文件-->
    <link rel="stylesheet" type="text/css" href="css/jNotify.jquery.css" />
    <script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script>
    <script type="text/javascript" src="js/angular-1.5.6.js" ></script>
    <script type="text/javascript" src="js/controller.js" ></script>
    <script type="text/javascript" src="js/jNotify.jquery.js"></script>
    <style>
        /*覆盖翻页按钮的样式*/
        .pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus {
            background-color: #8c7357;
            border-color: #8c7357;
        }

        .pagination > li > a, .pagination > li > span {
            color: #8c7357;
        }
    </style>
</head>
<body ng-controller="showTravels">
<div class="pushNote">
    <!--点击发布游记如果登录了就跳转到发布页面-->
    <a href="yajiang_pushNotes.html">发布游记</a>
</div>

<!--头部开始-->
<div class="tm-header">
    <div class="container">
        <div class="row">
            <div class="col-lg-3 col-md-4 col-sm-3 tm-site-name-container">
                <a href="#" class="tm-site-name">雅江
                    <img src="images/logo.png" style="width: 2em;height: 2em;"/>
                </a>
            </div>
            <div class="col-lg-9 col-md-8 col-sm-9">
                <div class="mobile-menu-icon">
                    <i class="fa fa-bars"></i>
                </div>
                <nav class="tm-nav">
                    <ul>
                        <li><a href="index.html">首页</a></li>
                        <li><a href="yajiang_introduction.html">景区概况</a></li>
                        <li><a href="yajiang_matsutake.html">雅江松茸</a></li>
                        <li><a href="yajiang_wenhua.html">雅江文化</a></li>
                        <li><a href="yajiang_xinwen.html">景区动态</a></li>
                        <li><a href="#" class="active">旅游攻略</a></li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>
</div>
<!--头部结束-->
<!--中间部分开始-->
<div class="container" style="margin-top: 5em;">
    <!--第一排，是一长一短-->
    <div class="row" >
        <div>
        <div class="col-lg-3 col-md-3 col-xs-12 col-ms-12 oddcol"  ng-repeat="(x,travels) in travelses" ng-if="x%8==0">
            <a href="yajiang_travleNotesDetail.html?uId={{travels.userId}}"><div class="inner">
                <img src="{{travels.picture}}"/>
                <h3>{{travels.title}}</h3>
                <p class="noteauthor">{{travels.userName}}</p>
                <p class="notecon">{{travels.content}}</p>
                <p class="notetime">{{travels.timeA}}</p>
            </div></a>
        </div>
        </div>
        <div class="col-lg-3 col-md-3 col-xs-12 col-ms-12 evencol" ng-repeat="(x,travels) in travelses" ng-if="x%8==1">
            <a href="yajiang_travleNotesDetail.html?uId={{travels.userId}}"><div class="inner">
                <img src="{{travels.picture}}"/>
                <h3>{{travels.title}}</h3>
                <p class="noteauthor">{{travels.userName}}</p>
                <p class="notecon">{{travels.content}}</p>
                <p class="notetime">{{travels.timeA}}</p>
            </div></a>
        </div>
        <div class="col-lg-3 col-md-3 col-xs-12 col-ms-12 oddcol" ng-repeat="(x,travels) in travelses" ng-if="x%8==2">
            <a href="yajiang_travleNotesDetail.html?uId={{travels.userId}}"><div class="inner">
                <img src="{{travels.picture}}"/>
                <h3>{{travels.title}}</h3>
                <p class="noteauthor">{{travels.userName}}</p>
                <p class="notecon">{{travels.content}}</p>
                <p class="notetime">{{travels.timeA}}</p>
            </div></a>
        </div>
        <div class="col-lg-3 col-md-3 col-xs-12 col-ms-12 evencol" ng-repeat="(x,travels) in travelses" ng-if="x%8==3">
            <a href="yajiang_travleNotesDetail.html?uId={{travels.userId}}"><div class="inner">
                <img src="{{travels.picture}}"/>
                <h3>{{travels.title}}</h3>
                <p class="noteauthor">{{travels.userName}}</p>
                <p class="notecon">{{travels.content}}</p>
                <p class="notetime">{{travels.timeA}}</p>
            </div></a>
        </div>
    </div>
    <!--第一排，是一短一长-->
    <div class="row">
        <div class="col-lg-3 col-md-3 col-xs-12 col-ms-12 evencol" ng-repeat="(x,travels) in travelses" ng-if="x%8==4">
            <a href="yajiang_travleNotesDetail.html?uId={{travels.userId}}"><div class="inner">
                <img src="{{travels.picture}}"/>
                <h3>{{travels.title}}</h3>
                <p class="noteauthor">{{travels.userName}}</p>
                <p class="notecon">{{travels.content}}</p>
                <p class="notetime">{{travels.timeA}}</p>
            </div></a>
        </div>
        <div class="col-lg-3 col-md-3 col-xs-12 col-ms-12 oddcol" ng-repeat="(x,travels) in travelses" ng-if="x%8==5">
            <a href="yajiang_travleNotesDetail.html?uId={{travels.userId}}"><div class="inner">
                <img src="{{travels.picture}}"/>
                <h3>{{travels.title}}</h3>
                <p class="noteauthor">{{travels.userName}}</p>
                <p class="notecon">{{travels.content}}</p>
                <p class="notetime">{{travels.timeA}}</p>
            </div></a>
        </div>
        <div class="col-lg-3 col-md-3 col-xs-12 col-ms-12 evencol" ng-repeat="(x,travels) in travelses" ng-if="x%8==6">
            <a href="yajiang_travleNotesDetail.html?uId={{travels.userId}}"><div class="inner">
                <img src="{{travels.picture}}"/>
                <h3>{{travels.title}}</h3>
                <p class="noteauthor">{{travels.userName}}</p>
                <p class="notecon">{{travels.content}}</p>
                <p class="notetime">{{travels.timeA}}</p>
            </div></a>
        </div>
        <div class="col-lg-3 col-md-3 col-xs-12 col-ms-12 oddcol" ng-repeat="(x,travels) in travelses" ng-if="x%8==7">
            <a href="yajiang_travleNotesDetail.html?uId={{travels.userId}}"><div class="inner">
                <img src="{{travels.picture}}"/>
                <h3>{{travels.title}}</h3>
                <p class="noteauthor">{{travels.userName}}</p>
                <p class="notecon">{{travels.content}}</p>
                <p class="notetime">{{travels.timeA}}</p>
            </div></a>
        </div>
    </div>
</div>
<!--中间部分结束-->
<!--翻页开始-->
<div class="container">
    <div class="row">
        <div class="col-lg-12 col-md-12 col-xs-12 text-center">
            <ul class="pagination">
                <!--翻页的，选中的那一页给他添加active，-->
                <li><a href="#">&laquo;</a></li>
                <li class="active" ng-click="addTravels(0)"><a href="#">1</a></li>
                <li><a href="#" ng-click="addTravels(1)">2</a></li>
                <li><a href="#" ng-click="addTravels(2)">3</a></li>
                <li><a href="#" ng-click="addTravels(3)">4</a></li>
                <li><a href="#" ng-click="addTravels(4)">5</a></li>
                <li><a href="#" ng-click="addTravels(5)">6</a></li>
                <li><a href="#" ng-click="addTravels(6)">7</a></li>
                <li><a href="#" ng-click="addTravels(7)">8</a></li>
                <li><a href="#">&raquo;</a></li>
            </ul>
        </div>
    </div>
</div>
<!--翻页结束-->
<!-- footer start here -->
<div class="footer-agile">
    <div class="container">
        <div class="footer-agileinfo">
            <!--友情链接开始-->
            <div class="col-md-3 col-sm-3 footer-wthree-grid">
                <h3>友情链接</h3>
                <ul>
                    <li><a href="http://www.cctv.com/"><span class="glyphicon glyphicon-menu-right"></span>中央电视台</a>
                    </li>
                    <li><a href="http://www.sina.com.cn/"><span class="glyphicon glyphicon-menu-right"></span> 新浪网</a>
                    </li>
                    <li><a href="http://www.abatour.com//"><span class="glyphicon glyphicon-menu-right"></span> 阿坝旅游</a>
                    </li>
                    <li><a href="http://www.yading.gov.cn/"><span class="glyphicon glyphicon-menu-right"></span>
                        稻城亚丁</a></li>
                    <li><a href="http://www.chinatibetnews.com/"><span class="glyphicon glyphicon-menu-right"></span>中国西藏新闻网</a>
                    </li>
                </ul>
            </div>
            <!--友情链接结束-->
            <!--微信二维码开始-->
            <div class="col-md-5 col-sm-5 footer-wthree-grid">
                <div class="agileits-w3layouts-tweets">
                    <h3>微信公众号</h3>
                </div>
                <p><img src="images/erweima.jpg" alt=""></p>
            </div>
            <!--微信二维码结束-->

            <div class="col-md-4 col-sm-4 footer-wthree-grid">
                <h3>微博公众号</h3>

                <p><img src="images/erweima.jpg" alt=""></p>
            </div>
            <div class="clearfix"></div>
        </div>
        <!--版权所有开始-->
        <div class="copy-right">
            <p>版权所有&copy;另一视点团队</p>
        </div>
        <!--版权所有结束-->
    </div>
</div>
<!-- //footer end here -->

<script src="js/moment.js" type="text/javascript" charset="utf-8"></script>
<script src="js/templatemo-script.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
<script>
    //    这个js是为翻页的按钮添加active样式
    var paginationul = document.getElementsByClassName('pagination')[0];
    var paginationulli = paginationul.getElementsByTagName('li');

    for (var i = 1; i < 9; i++) {
        paginationulli[i].onclick = function () {
            for (var j = 0; j < paginationulli.length; j++) {
                paginationulli[j].className = ' ';
            }
            this.className = 'active';
        }
    }
</script>
</body>
</html>

